<template>
  <div class="method">
    <div class="method-radio">
      <radio v-for="item in labelList" :key="item.id" v-model="selectItemId" :item="item" />
    </div>
    <div class="method-btn">
      <div class="method-btn-next" @click="toReview">进入下一步</div>
      <div class="method-btn-last" @click="$router.go(-1)">返回上一步</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Radio from '@/view/pay/method/radio/index.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()

const labelList = ref([
  {
    id: 1,
    label: '支付宝支付',
    value: 'alipay'
  },
  {
    id: 2,
    label: '银联支付',
    value: 'unionpay'
  }
])

const selectItemId = ref(labelList.value[0].id)

const toReview = () => {
  sessionStorage.setItem("payMethod", JSON.stringify(labelList.value.find(item => item.id === selectItemId.value)))
  router.push({
    name: 'pay_review'
  })
}
</script>

<style lang="less" scoped>
@primary-color: #088395;
@primary-hover-color: rgb(22, 162, 184);

.method {
  .method-radio {
    :deep(.radio) {
      padding-bottom: 20px;
      padding-top: 20px;
      border-bottom: 1px solid rgba(163, 170, 171, 0.2);

      &:last-child {
        padding-bottom: 0;
        border: 0;
      }

      &:first-child {
        padding-top: 0;
      }
    }
  }

  .method-btn {
    display: flex;
    margin-top: 40px;

    div {
      width: 350px;
      height: 50px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 400;
      transition: all 0.4s;
      cursor: pointer;
    }

    .method-btn-next {
      background: rgb(8, 131, 149);
      color: rgb(255, 255, 255);

      &:hover {
        background-color: @primary-hover-color;
      }
    }

    .method-btn-last {
      border: 1px solid rgba(122, 127, 128, 0.2);
      margin-left: 50px;

      &:hover {
        color: @primary-color;
        border: 1px solid @primary-color;
      }
    }
  }
}
</style>